<template>
	<!-- title部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoHome"></image>
		<view class="titlebox-titletext">云发单</view>
	</view>

	<!-- message部分 -->
	<view class="message">
		<view class="message-imgtextbox">
			<view class="message-imgtextbox-imgbox">
				<image class="message-imgtextbox-imgbox-img" src="../../static/头像.png"></image>
			</view>

			<view class="message-imgtextbox-textbox">
				<view class="message-imgtextbox-textbox-text1">hi，爱喝咖啡的金豆</view>
				<view class="message-imgtextbox-textbox-text2">开通时间: 2024-03-20 剩余3天</view>
			</view>

			<view class="message-imgtextbox-text">续费</view>
		</view>
		<view class="message-loginbox">
			<image class="message-loginbox-img" src="../../static/微信小图标.png"></image>
			<view class="message-loginbox-text">未在线</view>
			<view class="message-loginwechat">登录微信></view>
		</view>
	</view>

	<!-- login部分 -->
	<button class="login">登录微信</button>

	<!-- tips -->
	<view class="tips">
		<view class="tipstext">温馨提示</view>
		<view class="tips-text">我最近也在想，虽然训练这些 AI
			确实要很多电费，但只要我们获得了这种智能——毕竟我们创造的一切都是依靠智能——然后把它应用到各个领域，特别是气候变化领域，便肯定能产生某种倍增效应，在碳排放等其他方面都能省下很多。</view>
	</view>

	<!-- authorize部分 -->
	<view class="authorize">
		<view class="authorize-text">授权提示</view>
		<view class="authorize-tips">以下平台需要授权（未授权用户使用云发单获取不到任何推广收入）</view>

		<view class="authorizebox">
			<view class="authorizebox-imgtextbox">
				<image class="authorizebox-imgtextbox-img" src="../../static/logo.png"></image>
				<view class="authorizebox-text">淘宝授权</view>
			</view>

			<view class="authorizebox-imgtextbox">
				<image class="authorizebox-imgtextbox-img" src="../../static/logo.png"></image>
				<view class="authorizebox-text">天猫授权</view>
			</view>

			<view class="authorizebox-imgtextbox">
				<image class="authorizebox-imgtextbox-img" src="../../static/logo.png"></image>
				<view class="authorizebox-text">京东授权</view>
			</view>

			<view class="authorizebox-imgtextbox">
				<image class="authorizebox-imgtextbox-img" src="../../static/logo.png"></image>
				<view class="authorizebox-text">拼多多授权</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoHome() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/home/home', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	.titlebox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		/* 添加这一行来水平居中 */
	}

	/* title部分样式 */
	.titlebox-backimg {
		width: 15px;
		height: 15px;
	}

	.titlebox-titletext {
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		/* color: #333; */
		font-weight: 600;
	}

	/* message部分 */
	.message {
		width: 96%;
		margin: 0 auto;
		background: white;
	}

	.message-imgtextbox {
		display: flex;
		align-items: center;
		padding: 2%;
		border-radius: 10px;
		background: rgb(241, 224, 84);
	}

	.message-imgtextbox-imgbox {
		border: 3px solid white;
		border-radius: 50px;
		padding: 2%;
		margin-right: 10px;
	}


	.message-imgtextbox-imgbox-img {
		width: 50px;
		height: 50px;
		display: block;
	}

	.message-imgtextbox-textbox {
		padding: 2%;
		flex: 1;
	}

	.message-imgtextbox-textbox-text1 {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.message-imgtextbox-textbox-text2 {
		font-size: 10px;
	}

	.message-imgtextbox-text {
		padding: 2% 4%;
		font-size: 13px;
		border-radius: 20px;
		/* margin-right: 10px; */
		background: white;
	}

	.message-loginimgtextboxbox {
		padding: 2px;
		display: flex;
		align-items: center;
	}

	.message-loginbox {
		padding: 2%;
		display: flex;
		align-items: center;
	}

	.message-loginbox-img {
		width: 15px;
		height: 15px;
		display: block;
		margin-right: 10px;
	}

	.message-loginbox-text {
		color: rgb(120, 120, 120);
		font-size: 12px;
		flex: 1;
	}

	.message-loginwechat {
		font-size: 12px;
	}

	/* login部分 */
	.login {
		font-size: 15px;
		margin: 30px auto;
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: limegreen;
		color: white;
		border-radius: 50px;
	}

	.tips {
		width: 92%;
		margin: 0 auto;
		padding: 2%;
		border-radius: 10px;
		background: white;
		margin-bottom: 10px;
	}

	.tipstext {
		padding: 2%;
		font-size: 15px;
	}

	.tips-text {
		font-size: 10px;
		color: rgb(120, 120, 120);
		padding: 2%;
	}

	.authorize {
		width: 92%;
		margin: 0 auto;
		padding: 2%;
		background: white;
		border-radius: 10px;
		margin-bottom: 10px;

	}

	.authorize-text {
		padding: 2%;
		font-size: 13px;
	}

	.authorize-tips {
		padding: 2%;
		font-size: 10px;
		color: rgb(120, 120, 120);
	}

	.authorizebox {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.authorizebox-imgtextbox {
		padding: 2%;
	}

	.authorizebox-imgtextbox-img {
		width: 35px;
		display: block;
		height: 35px;
		margin: 0 auto;
	}

	.authorizebox-text {
		font-size: 12px;
		text-align: center;
	}
</style>
